<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:b="http://bootsfaces.net/ui"	
	template="layout_bf.xhtml">

	<ui:define name="pcontent">	
	<h3 style="position: fixed; width: 100%; text-align: center;">Hello</h3>
	<br/><br/><br/>
		
<h:form id="loginForm">
  <b:container layout="fluid">
    <b:panel title="login screen" look="primary">
      <b:row>
        <b:column medium-screen="2">
          <h:outputText value="Username:" for="username" />
        </b:column>
        <b:column medium-screen="4">
          <b:inputText placeholder="Username" id="username" value=""
                       ajax="true" autocomplete="false" update="@(.message)">
            <f:facet name="prepend">
              <b:icon name="user" />
            </f:facet>
          </b:inputText>
        </b:column>
        <b:column medium-screen="6" style-class="message">
          <b:message for="username" />
        </b:column>
      </b:row>
      <b:row tooltip="This password has fancy error messages.">
        <b:column medium-screen="2">
          <h:outputText value="Password:" />
        </b:column>
        <b:column medium-screen="4">
          <b:inputSecret placeholder="Password" id="password" value=""
                         ajax="true" autocomplete="false" update="@(.message)">
            <f:facet name="prepend">
              <b:iconAwesome name="key" />
            </f:facet>
          </b:inputSecret>
        </b:column>
        <b:column medium-screen="6" styleClass="message">
          <b:message for="password" line-break-tag=""/>
        </b:column>
      </b:row>
      <b:row>
        <b:column span="2" offset="2">
          <b:commandButton value="login" onclick="ajax:loginBean.login()" update="@form" look="primary"
                           style="width:100%" />
        </b:column>
        <b:column span="2">
          <b:commandButton value="password forgotten" onclick="ajax:loginBean.forgotPassword()" update="@form"
                           look="danger" style="width:100%" />
        </b:column>
      </b:row>
    </b:panel>
  </b:container>
</h:form>
<b:well>
<b:row>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
  <b:column span="1"><h:outputText value="span=1"/></b:column>
</b:row>
<b:row>
  <b:column span="8"><h:outputText value="span=8"/></b:column>
  <b:column span="4"><h:outputText value="span=4"/></b:column>
</b:row>
<b:row>
  <b:column span="4"><h:outputText value="span=4"/></b:column>
  <b:column span="4"><h:outputText value="span=4"/></b:column>
  <b:column span="4"><h:outputText value="span=4"/></b:column>
</b:row>
<b:row>
  <b:column span="6"><h:outputText value="span=6"/></b:column>
  <b:column span="6"><h:outputText value="span=6"/></b:column>
</b:row>
</b:well>
<b:well>
<b:row styleClass="show-grid">
  <b:column col-xs="12" col-sm="6" col-md="8"><h:outputText value="col-xs=12 col-sm=6 col-md=8"/></b:column>
  <b:column col-xs="6" col-sm="6" col-md="4"><h:outputText value="col-xs=6 col-sm=6 col-md=4"/></b:column>
</b:row>
<b:row styleClass="show-grid">
  <b:column col-xs="6" col-sm="4" col-md="4"><h:outputText value="col-xs=6 col-sm=4 col-md=4"/></b:column>
  <b:column col-xs="6" col-sm="4" col-md="4"><h:outputText value="col-xs=6 col-sm=4 col-md=4"/></b:column>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
  <b:column col-xs="6" col-sm="4" col-md="4"><h:outputText value="col-xs=6 col-sm=4 col-md=4"/></b:column>
</b:row>
</b:well>

<b:well>
<b:row styleClass="show-grid">
  <b:column span="4"><h:outputText value="span=4"/></b:column>
  <b:column span="4" offset="4"><h:outputText value="span=4 offset=4"/></b:column>
</b:row>
<b:row styleClass="show-grid">
  <b:column span="3" offset="3"><h:outputText value="span=3 offset=3"/></b:column>
  <b:column span="3" offset="3"><h:outputText value="span=3 offset=3"/></b:column>
</b:row>
<b:row styleClass="show-grid">
  <b:column span="6" offset="3"><h:outputText value="span=6 offset=3"/></b:column>
</b:row>
<b:row styleClass="show-grid">
  <b:column col-md="9">
    <h:outputText value="Level 1: col-md=9"/>
    <b:row styleClass="show-grid">
      <b:column col-md="6"><h:outputText value="Level 2: col-md=6"/></b:column>
      <b:column col-md="6"><h:outputText value="Level 2: col-md=6"/></b:column>
    </b:row>
  </b:column>
</b:row>
</b:well>

<b:well>
<b:spinner size="2x" />#{'   '}
<b:spinner name="refresh" size="3x" />#{'   '}
<b:spinner name="cog" size="1x" />
</b:well>

<b:container fluid="true" contentDisabled="false">
  <b:row contentDisabled="false">
    <b:column span="6" contentDisabled="false">
      <b:inputText placeholder="You can't input anything here" label="b:inputText"/>
      <b:datepicker label="Datepicker" />
      <b:button look="primary" value="You can't click me!"/>
    </b:column>
    <b:column span="6">
      <b:dateTimePicker label="DateTimerPicker"/>
      <b:colorPicker label="ColorPicker"/>
      <b:selectOneMenu label="SelectOneMenu">
      <f:selectItem itemValue="one" itemLabel="one"></f:selectItem>
      <f:selectItem itemValue="two" itemLabel="two"></f:selectItem>
      </b:selectOneMenu>
      <b:selectMultiMenu label="SelectMultiMenu" >
      <f:selectItem itemValue="one" itemLabel="one"></f:selectItem>
      <f:selectItem itemValue="two" itemLabel="two"></f:selectItem>
      </b:selectMultiMenu>
    </b:column>
  </b:row>
</b:container>
		
<b:jumbotron>
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</b:jumbotron>

<b:form id="messageForm">
  <b:panelGrid colSpans="6,6">
    <b:switch value="#num;{checkboxBean.cbxError}"
              id="checkboxWithErrorMessage"
              caption="click to toggle the error message"
              label="error"
              onchange="ajax:checkboxBean.action();"
              update="@form"
              />
    <b:message />
    <b:switch value="#num;{checkboxBean.cbxFatal}"
              id="checkboxWithFatalMessage"
              caption="click to toggle the fatal error message"
              label="fatal"
              onchange="ajax:checkboxBean.action();"
              update="@form"
              />
    <b:message for="checkboxWithFatalMessage" />
    <b:switch value="#num;{checkboxBean.cbxWarning}"
              id="checkboxWithWarning"
              caption="click to toggle the warning"
              label="warning"
              onchange="ajax:checkboxBean.action();"
              update="@form"
              />
    <b:message for="@previous:@previous:@next" />
    <b:switch value="#num;{checkboxBean.cbxInfo}"
              id="checkboxWithInfoMessage"
              caption="click to toggle the info message"
              label="info"
              onchange="ajax:checkboxBean.action();"
              update="@form"
              />
 
    <b:message for="@form:**:checkboxWithInfoMessage" />
  </b:panelGrid>
</b:form>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>b:button</th>
      <th><code>look</code> attribute</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td><b:button value="Default" /></td>
    <td>missing</td>
    <td>Standard gray button with gradient</td>
  </tr>
  <tr>
    <td><b:button value="Primary" look="primary"/></td>
    <td><code>look="primary"</code></td>
    <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
  </tr>
  <tr>
    <td><b:button look="info" value="Info"/></td>
    <td><code>look="info"</code></td>
    <td>Used as an alternative to the default styles</td>
  </tr>
  <tr>
    <td><b:button look="success" value="Success"/></td>
    <td><code>look="success"</code></td>
    <td>Indicates a successful or positive action</td>
  </tr>
  <tr>
    <td><b:button look="warning" value="Warning"/></td>
    <td><code>look="warning"</code></td>
    <td>Indicates caution should be taken with this action</td>
  </tr>
  <tr>
    <td><b:button look="danger" value="Danger"/></td>
    <td><code>look="danger"</code></td>
    <td>Indicates a dangerous or potentially negative action</td>
  </tr>
  <tr>
    <td><b:button look="link" value="Link" /></td>
    <td><code>look="link"</code></td>
    <td>Alternate dark gray button, not tied to a semantic action or use</td>
  </tr>
 
  </tbody>
</table>

	</ui:define>

</ui:composition>